<template>
  <div class="person">
    <div class="person-head">
      <img :src="cp1" v-if="this.$store.state.headimg == 'null' || this.$store.state.headimg == null" alt="">
      <img :src="comimgsrc+this.$store.state.headimg" v-else alt="" >
      
      <div class="name">
        {{this.$store.state.username}}
      </div>
    </div>
    <router-link to="/basicinfo" class="item">
      <div class="ic">
        <i class="icon iconfont icon-gerenziliao"></i>
      </div>
      <p>基本资料</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/shopcar" class="item">
      <div class="ic">
        <i class="icon iconfont icon-gouwuche"></i>
      </div>
      <p>我的购物车</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/myorder" class="item">
      <div class="ic">
        <i class="icon iconfont icon-dingdan"></i>
      </div>
      <p>我的订单</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/modify" class="item">
      <div class="ic">
        <i class="icon iconfont icon-Password"></i>
      </div>
      <p>修改密码</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/shaddress" class="item">
      <div class="ic">
        <i class="icon iconfont icon-dizhi"></i>
      </div>
      <p>收货地址</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/mycode" class="item">
      <div class="ic">
        <i class="icon iconfont icon-erweima"></i>
      </div>
      <p>我的二维码</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <router-link to="/mydistribution" class="item">
      <div class="ic">
        <i class="icon iconfont icon-fenxiao"></i>
      </div>
      <p>我的分销</p>
      <i class="ri icon iconfont icon-gengduo"></i>
    </router-link>
    <div class="outlogin" @click="outlogin()">
      退出登录
    </div>
    <comFooter v-bind:footerindex="4"></comFooter>
  </div>
</template>

<script>
import cp1 from '@/assets/image/cp1.jpg';
import qs from "qs"
import comFooter from '@/components/common/comfooter'
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      cp1,
      comimgsrc:'http://api.mountainfreshes.com'
    }
  },
  methods:{
    outlogin:function(){
      this.$http.get("/index.php/index/user/logout")
      .then(res => {
        this.$store.state.dlzt = -1;
        console.log(this.$store.state.dlzt)
        localStorage.clear();
        this.$store.state.dlzt = ''
        this.$store.state.username = ''
        this.$store.state.userid = ''
        this.$store.state.headimg = ''
        this.$router.push({ path: '/' });
        this.$toast('退出成功');
      })
      .catch(error => {
        
      });
    }
  },
  components:{
    comFooter
  },
  created(){
    
  }
}
</script>

<style scoped lang="less">
.outlogin{
  width: 2.4rem;
  height: .52rem;
  margin: .26rem auto 0;
  background: #54b84c;
  border-radius: 8px;
  line-height: .52rem;
  font-size: .22rem;
  color: #fff;
}
.item{
  display: block;
  padding: 0 .2rem;
  height: .82rem;
  border-bottom: .02rem solid #dcdcdc;
  .ic{
    width: .58rem;
    height: .58rem;
    float: left;
    margin-top: .12rem;
    border-radius: 100%;
    background: #54b84c;
    text-align: center;
    line-height: .58rem;
    i{
      color: #fff;
      font-size: .26rem;
    }
  }
  p{
    float: left;
    padding-left: .18rem;
    font-size: .24rem;
    color: #333;
    line-height: .82rem;
  }
  .ri{
    float: right;
    font-size: .26rem;
    display: block;
    line-height: .82rem;
    color: #6d6d6d;
  }
}
.person-head{
  border-top: .1rem solid #d6d6d6;
  background: #54b84c;
  padding: 0 .2rem;
  height: 1.64rem;
  border-bottom: .1rem solid #d6d6d6;
  img{
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    float: left;
    border-radius: 100%;
    overflow: hidden;
    margin-top: .12rem;
  }
  .name{
    width: 4.4rem;
    float: right;
    height: .64rem;
    margin-top: .5rem;
    line-height: .64rem;
    font-size: .24rem;
    color: #fff;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
